<template>
    <view class="body">
        <u-toast ref="uToast"></u-toast>
        
        <!-- Logo和欢迎区域 -->
        <view class="logoCon flex-center-center">
            <image :src="imgUrl" mode="" class="logo"></image>
        </view>
        <view class="welcome-text">
            <text class="welcome-title">欢迎使用创闪宝合作伙伴</text>
            <text class="welcome-subtitle">为您提供一站式服务平台</text>
        </view>
        
        <!-- 登录表单 -->
        <view class="login-form">
            <!-- 账号输入 -->
            <view class="form-item">
                <text class="form-label">账号</text>
                <u--input 
                    v-model="form.phoneNo" 
                    type="number" 
                    border="none" 
                    clearable
                    placeholder-class="myplaceholder" 
                    placeholder="请输入手机号" 
                    maxlength="11"
                    class="form-input">
                </u--input>
                <view class="input-line"></view>
            </view>

            <!-- 密码输入 -->
            <view class="form-item">
                <view class="password-header">
                    <text class="form-label">密码</text>
                    <text class="forgot-pwd" @click="toForgetPwd()">忘记密码</text>
                </view>
                <view class="password-input-container">
                    <u--input 
                        v-model="form.passwd" 
                        :type="showPass ? 'text' : 'password'"
                        border="none" 
                        placeholder-class="myplaceholder" 
                        placeholder="请输入密码"
                        class="form-input">
                    </u--input>
                    <view class="eye-icon" @click="showPass = !showPass">
                        <image 
                            :src="showPass ? '/static/icon/p_030.png' : '/static/icon/p_022.png'" 
                            mode="widthFix"
                            class="pass-icon">
                        </image>
                    </view>
                </view>
                <view class="input-line"></view>
            </view>

            <!-- 协议同意 -->
            <view class="agreement-section">
                <u-radio-group v-model="radiovalue" class="agreement-radio">
                    <u-radio name="1" @change="radioChange" class="agreement-checkbox">
                        <view class="agreement-text">
                            <text>我已阅读并同意</text>
                            <text class="agreement-link" @click="goYs()">《用户隐私保护协议》</text>
                        </view>
                    </u-radio>
                </u-radio-group>
            </view>

            <!-- 登录按钮 -->
            <view class="login-button-section">
                <u-button 
                    type="primary" 
                    color="#3182f4" 
                    shape="circle" 
                    text="登录" 
                    @click="loginBtn()"
                    class="login-btn">
                </u-button>
            </view>

            <!-- 注册链接 -->
           <!-- <view class="register-section">
                <text class="register-text" @click="toRegisterPage()">注册账号</text>
            </view> -->
        </view>

        <!-- 客服联系 -->
    

        <!-- 备案信息 -->
   

        <!-- 公司信息 -->
        <view class="company">
            <companyMessage></companyMessage>
        </view>
    </view>
</template>


<script>
    import {
        login
    } from '@/common/api.js'
    import companyMessage from '@/components/company-message.vue'
    import {
        mapActions,
        state
    } from 'vuex'
    export default {
        components: {
            companyMessage
        },
        data() {
            return {
                radiovalue: '2',
                imgUrl: require('@/static/icon/p_041.png'),
                showPass: false, //是否显示密码
                tipText: {
                    passwd: false,
                    priCode: false
                },
                isWechat: uni.getSystemInfoSync().uniPlatform,
                form: {
                    phoneNo: '',
                    passwd: '',
                },

                rules: {
                    'phoneNo': {
                        type: 'string',
                        required: true,
                        message: '请填写电话号码',
                        trigger: ['blur', 'change']
                    },
                    'passwd': {
                        type: 'string',
                        required: true,
                        message: '请填写密码',
                        trigger: ['blur', 'change']
                    },


                },

            };
        },
        onShow() {
            console.log(this.isWechat)
        },


        methods: {
            ...mapActions('user', ['login']),
            inputpasswd() {

            },

            goYs() {
                uni.navigateTo({
                    url: '/pages/user/terms',
                })
            },
            goTk() {
                uni.navigateTo({
                    url: '/pages/user/protocol'
                })
            },
            radioChange(n) {
                this.radiovalue = n
                console.log(this.radiovalue);
            },
            loginBtn() {
                //带有底部bar的跳转
                // uni.reLaunch({
                //     url: '/pages/index/index'
                // })
                if (!this.$u.test.mobile(this.form.phoneNo)) {
                    this.$u.toast('请输入正确的手机号码')
                    return;
                }
                if (process.env.NODE_ENV === 'development') {
                    this.phoneNo = '13662333141';
                    this.passwd = '12345678';
                }

                if (this.radiovalue !== '1') {
                    this.$u.toast('请先阅读并同意协议和条款')
                    return;
                }

                login(this.form).then((res) => {
                    if (res.status === 200 || res.status === 0) {
                        uni.setStorageSync('TOKEN_KEY', res.data.token);
                        uni.setStorageSync('merchantId', res.data.merchantId);
                        uni.setStorage({
                            key: 'USER_KEY',
                            data: res.data,

                        });
                        // 先保存账号密码，避免在回调中this指向问题
                        const phoneNo = this.form.phoneNo
                        const passwd = this.form.passwd
                        
                        this.$refs.uToast.show({
                            message: '登录成功',
                            complete() {
                                uni.navigateTo({
                                    url: `/pages/login/selectOrg?phoneNo=${phoneNo}&passwd=${passwd}`
                                })
                            }
                        })
                    }

                })
            },

            toRegisterPage() {
                uni.navigateTo({
                    url: '/pages/login/register'
                })
            },
            toForgetPwd() {
                uni.navigateTo({
                    url: '/pages/login/forgetPwd'
                })
            },
            contactService() {
                uni.showToast({
                    title: '客服电话: 186-8888-8888',
                    icon: 'none',
                    duration: 2000
                });
            }
        },
        onReady() {
            //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
            this.$refs.uForm.setRules(this.rules)
        },
    };
</script>

<style lang="scss" scoped>
    .body {
        width: 92%;
        padding: 0 4%;

        .company {
            margin-top: 160rpx;
            width: 100%;
            padding-bottom: 50rpx;
        }

        .logoCon {
            margin-top: 20rpx;
            height: 450rpx;
            width: 100%;

            .logo {
                width: 150rpx;
                height: 150rpx;
                border-radius: 20rpx;
            }

        }

        .welcome-text {
            margin-top: -120rpx;
          
            .welcome-title {
                font-size: 32rpx;
                font-weight: bold;
                color: #333;
            }
            .welcome-subtitle {
                display: block;
                text-align: center;
                font-size: 30rpx;
                color: #666;
                margin-bottom: 50rpx;
            }
        }

        .login-form {
            margin-top: 30rpx;
            .form-item {
                margin-bottom: 20rpx;
                .form-label {
                    font-size: 28rpx;
                    color: #333;
                    margin-bottom: 10rpx;
                }
                .form-input {
                    height: 80rpx;
                    font-size: 28rpx;
                    color: #333;
                    padding: 0 20rpx;
                }
                .input-line {
                    height: 1rpx;
                    background-color: #eee;
                    margin-top: 10rpx;
                }
            }
            .password-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                .form-label {
                    font-size: 28rpx;
                    color: #333;
                }
                .forgot-pwd {
                    font-size: 24rpx;
                    color: #3182f4;
                    padding: 10rpx;
                }
            }
            .password-input-container {
                display: flex;
                align-items: center;
                .form-input {
                    flex: 1;
                }
                .eye-icon {
                    padding: 0 20rpx;
                }
                .pass-icon {
                    width: 36rpx;
                    height: 36rpx;
                }
            }
            .agreement-section {
                margin-top: 80rpx;
                .agreement-radio {
                    display: flex;
                    align-items: center;
                    .agreement-checkbox {
                        .agreement-text {
                            font-size: 24rpx;
                            color: #333;
                            .agreement-link {
                                color: #3182f4;
                                text-decoration: underline;
                            }
                        }
                    }
                }
            }
            .login-button-section {
                margin-top: 30rpx;
                .login-btn {
                    height: 80rpx;
                    font-size: 32rpx;
                }
            }
            .register-section {
                margin-top: 20rpx;
                text-align: center;
                .register-text {
                    font-size: 24rpx;
                    color: #3182f4;
                    padding: 10rpx;
                }
            }
        }

        

      
    }
</style>